<template>
	
    <view>
        <button style="background-color: #4cd964;" @click="toggleMessage('success')">成功</button>
        <button style="background-color: #dd524d;" @click="toggleMessage('error')">错误</button>
        <button style="background-color: #f0ad4e;" @click="toggleMessage('warn')">警告</button>
        <button style="background-color: #909399;" @click="toggleMessage('info')">信息</button>
		<button style="background-color: #909399;" @click="sharePopView">分享弹窗</button>
		<button style="background-color: #909399;" @click="dialogPopView">带按钮弹窗</button>
        <!-- 消息提示 -->
        <uni-popup ref="popupMessage" type="message">
            <uni-popup-message :type="msgType" :message="message" :duration="700" />
        </uni-popup>
        <!-- 对话框 -->
        <uni-popup ref="popupDialog" type="dialog">
            <uni-popup-dialog :type="msgType" title="通知" content="欢迎使用 uni-popup!" :before-close="true" @confirm="dialogConfirm" @close="dialogClose" />
        </uni-popup>
		<!-- 分享框 -->
		<uni-popup ref="popupShare" type="share">
			<uni-popup-share title="分享到" @select="select"></uni-popup-share>
		</uni-popup>
    </view>
</template>

<script>
	export default {
	    data() {
	        return {
	            msgType: 'success',
	            message: '这是一条成功消息提示',
	        };
	    },
	    methods: {
	        toggleMessage(type) {
	            this.msgType = type;
	            switch (type) {
	                case 'success':
	                    this.message = '这是一条成功消息提示';
	                    break;
	                case 'warn':
	                    this.message = '这是一条警告消息提示';
	                    break;
	                case 'info':
	                    this.message = '这是一条消息提示';
	                    break;
	                case 'error':
	                    this.message = '这是一条错误消息提示';
	                    break;
	            }
				this.$refs.popupDialog.open();
	        },
	        dialogConfirm() {
	            this.$refs.popupMessage.open();
	            this.$refs.popupDialog.close();
	        },
	        dialogClose() {
	            this.msgType = 'info';
	            this.message = '点击了对话框的取消按钮';
	            this.$refs.popupMessage.open();
	             
	            this.$refs.popupDialog.close();
	        },
			select(e){
				console.log(e);
			},
			sharePopView(){
				this.$refs.popupShare.open();
			},
			dialogPopView(){
				this.$refs.popupDialog.open();
			},
			
			onclick(index){
				
			}
	    }
	};
</script>
	
<style>
</style>